<template>
  <view class="give-list-layout">
    <my-header title="赠礼记录"></my-header>
    <my-content class="content">
<!--      <view class="tab">
        <view
          @click="changeType(item.id)"
          class="tab_item"
          v-for="item in typeArr"
          :key="item.id"
          :class="type === item.id ? 'active' : ''"
        >
          <view class="tab_title">{{ item.title }}</view>
          &lt;!&ndash; <view class="tab_border"></view> &ndash;&gt;
        </view>
      </view>-->
      <my-tab start v-model="type" :tab-list="typeArr"></my-tab>

      <scroll-view
        class="scroll"
        refresher-background=""
        :refresher-triggered="refreshStatus"
        @refresherrefresh="refresh"
        :refresher-enabled="true"
        scroll-y="true"
        @scrolltolower="lower"
      >
        <view class="box">
          <view class="box_item item-bg" v-for="item in orderData" :key="item.id">
            <view class="box_header">
              <view class="time" v-if="type === 1">赠送时间：{{ item.created_at }}</view>
              <view class="time" v-if="type === 2">获赠时间：{{ item.created_at }}</view>
            </view>
            <view class="divider"></view>
            <view class="bottom">总价值： <text class="total-price">￥{{item.total_price}}</text></view>
            <view class="bottom">
              <view v-if="type === 1">受赠用户ID：</view>
              <view v-if="type === 2">赠送用户ID：</view>
              <text>{{item.user_id}}</text>
            </view>
            <view class="bottom">
              <view v-if="type === 1">受赠人：</view>
              <view v-if="type === 2">赠送人：</view>
              <image class="bottom_avatar" :src="item.avatar"></image>
              <view class="bottom_nickname">{{ item.nickname }}</view>
            </view>
            <view class="bottom">
              <text>数量：{{item.blind_box_give_order_prize.length}}</text>
            </view>
            <view class="bottom">
              <text style="flex: 1;">备注：{{ item.remark }}</text>
              <view class="show-prizes btn-primary" @click="showPrizes(item.blind_box_give_order_prize)">商品明细</view>
            </view>

<!--            <view class="box_prizes">
              <view class="box_prize"
                    v-for="prize in item.blind_box_give_order_prize" :key="prize.id">
                <image mode="aspectFit" class="box_prize_image" :src="prize.prize_image"></image>
                <view class="num">x{{ prize.prize_num }}</view>
              </view>
            </view>-->
          </view>
        </view>
      </scroll-view>
    </my-content>

    <my-alert-dialog ref="prize-dialog">
      <view class="goods-content">
        <view class="prize-list">
          <view class="prize-item" v-for="item in prizeList" :key="item.id">
            <image class="prize-img" :src="item.prize_image"></image>
            <view class="prize-info">
              <text class="prize-name">{{item.prize_name}}</text>
              <text class="prize-num">X{{item.prize_num}}</text>
            </view>
          </view>
        </view>
      </view>
    </my-alert-dialog>
  </view>
</template>

<script>
import api from '../../api/index.js'
import box from '@/mixins/box'

export default {
  mixins: [box],
  data() {
    return {
      orderData: [],
      page: 1,
      last_page: 1,
      typeArr: [
        { id: 1, title: '我的赠送' },
        { id: 2, title: '我的获赠' },
      ],
      type: 1,
      refreshStatus: false,
      prizeList: []
    }
  },
  onLoad() {
  },
  onShow() {
    this.refresh()
  },
  watch: {
    type() {
      this.page = 1
      this.getData(2)
    }
  },
  methods: {
    showPrizes(prizes) {
      this.prizeList = prizes
      this.$refs['prize-dialog'].show()
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getData(1)
    },
    refresh() {
      if (!this.refreshStatus) {
        this.refreshStatus = true
        this.page = 1
        this.getData(2)
      }
    },
    changeType(type) {
      if (type !== this.type) {
        this.type = type
        this.page = 1
        this.refresh()
      }
    },
    getData(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.blindBoxGiveOrders
        .index({ page: this.page, type: this.type })
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            this.refreshStatus = false
            if (type == 1) {
              this.orderData = this.orderData.concat(res.data.data)
            } else if (type == 2) {
              this.orderData = res.data.data
            }
            this.page++
            this.last_page = res.data.last_page
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.give-list-layout {
  height: 100vh;
  background: url("https://www.dingxians.cn/upload/images/common/bg.png");
}

.content {
  height: 100%;
  display: flex;
  flex-direction: column;

  .tab {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    /*  height: 80rpx; */
    box-sizing: border-box;
    padding: 30rpx;

    .tab_item {
      flex: 1;
      font-size: 26rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      color: #808080;
      height: 46rpx;
      line-height: 46rpx;

      &.active {
        background-image: url('https://www.dingxians.cn/upload/images/user/bg-tab-active.png');
        background-size: 100% 100%;

        .tab_title {
          color: #ded000;
          font-weight: bold;
        }
      }
    }
  }

  .scroll {
    flex: 1;
    margin: 0 auto;

    width: 710rpx;
    overflow: hidden;
  }

  .box {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 710rpx;

    .box_item {
      display: flex;
      flex-direction: column;
      width: 710rpx;
      box-sizing: border-box;
      margin: 0 auto 20rpx auto;
      padding-bottom: 20rpx;
      color: white;

      .box_header {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 20rpx 0;

        .box_name {
          margin-left: 20rpx;
        }

        .time {
          font-size: 24rpx;
          color: #fff;
          opacity: 0.7;
          margin-top: 10rpx;
          margin-right: 40rpx;
        }
      }

      .box_prizes {
        display: flex;
        flex-wrap: wrap;
        /*justify-content: center;*/
        width: 90%;
        margin: 0 auto;
        align-content: flex-start;

        .box_prize {
          position: relative;
          display: flex;
          align-items: center;
          width: 138rpx;
          height: 138rpx;
          margin: 10rpx;
          background-size: 100% 100%;

          .goods_level {
            position: absolute;
            left: 10rpx;
            top: 10rpx;
            width: 61rpx;
            height: 24rpx;
            z-index: 19;
            box-sizing: border-box;
            background-size: 100% 100%;
            font-size: 16rpx;
            color: white;
            font-family: 'youshe';
            padding-left: 28rpx;
          }

          .box_prize_image {
            width: 100rpx;
            margin: 0 auto;
            height: 100rpx;
          }

          .num {
            position: absolute;
            right: 14rpx;
            bottom: 14rpx;
            font-size: 20rpx;
            color: white;
            opacity: 0.7;
          }
        }
      }

      .divider {
        width: 100%;
        height: 2rpx;
        opacity: 0.16;
        background: linear-gradient(
            116deg,
            rgba(255, 255, 255, 0) 0%,
            #ffffff 48%,
            rgba(255, 255, 255, 0) 100%,
            #808080 100%
        );
      }

      .bottom {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        margin-left: 30rpx;
        margin-top: 10rpx;
        color: white;

        .show-prizes {
          padding: 10rpx 20rpx;
          margin-right: 30rpx;
        }

        .total-price {
          font-size: 40rpx;
          color: #ee5093;
        }

        .bottom_avatar {
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          margin: 0 10rpx;
        }
      }
    }
  }
}

.goods-content {
  .prize-list {
    .prize-item {
      display: flex;
      align-items: center;

      .prize-img {
        width: 200rpx;
        height: 200rpx;
      }

      .prize-info {
        margin-left: 30rpx;
        text-align: start;
        display: flex;
        flex-direction: column;
      }
    }
  }
}
</style>
